<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>欢迎来到智能家居世界，请先登录</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    
</head>
<style>
    *{
        margin:0;
        padding:0
    }
    .box{
        width: 400px;
        /* height:300px; */
        border:solid 1px #ddd;
        position:absolute;
        top:40%;
        left:50%;
        margin-left:-200px;
        margin-top:-150px;
    }
    ul{
        width: 400px;
    }
    li {
        padding:10px 0;
        margin-bottom: 10px;
        /* display:inline-block; */
        width:50%;
        list-style: none;
        text-align: center;
        background: #ccc;
        float: left;
    }
    .active{
        background: #aaa;
        cursor:pointer;        
    }
    .tab_hide{
        display:none;
    }
    .teb_box{
        margin:40px 20px;
    }
    button{
        align-content: center;
        padding:5px 10px;
        margin: 10px 150px;
    }
    td{
        padding-top: 20px;
    }
    .tab{
        margin:0 auto;
    }
    .err_info{
        clear: both;
   }
   #error_box{
       color: red;
   }
   .reg{
       background:red;
   }
</style>
<body>
    <div class="box">
        <ul>
            <li class="active" >登陆</li>
            <li >注册</li>
        </ul>
        <div class="teb_box">
            <form id="formId">
                <!-- 登陆页面 -->
                    <table align="center" class="tab">
                        <tr>
                            <td align="center" colspan="2"><span id="error_box"></span></td>
                        </tr>
                        <tr>
                            <td>用户名：</td>
                            <td>
                                <input type="text" id="user" name="username" placeholder="请输入用户名"/>
                            </td>
                        </tr>
                    
                        <tr>
                            <td>密码:</td>
                            <td>
                                <input type="password" id="pwd" name="password" placeholder="请输入密码">
                            </td>
                        </tr>
                        <tr>
                            <td align="center" colspan="2" class="log_btn">
                               <button type="button" id="login">登陆</button>
                            </td>
                        </tr>

                    </table>
                       
                <!-- 注册页面 -->
                    <table class="tab tab_hide" align="center">
                        <tr>
                            <td align="center" colspan="2"><span id="reg_err"></span></td>
                        </tr>

                        <tr>
                            <td>用户名：</td>
                            <td>
                                <input type="text" id="user1" name="username" placeholder="请输入用户名"/>
                            </td>
                        </tr>
                        <tr>
                            <td>密码:</td>
                            <td>
                                <input type="password" id="pwd1" name="password" placeholder="请输入密码">
                            </td>
                        </tr>
                       
                        <tr>
                            <td>确认密码:</td>
                            <td>
                                <input type="password" id="pwd2" name="password" placeholder="请确认密码">
                            </td>
                        </tr>

                        <tr>
                            <td align="center" colspan="2" class="log_btn">
                                <button type="button" id="regist">注册</button>
                            </td>
                        </tr>
                    </table>
            </form>
         </div>
    </div>
    
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
        $(function(){
            $('ul>li').mouseenter(function(){
                $(this).addClass('active').siblings('li').removeClass('active');
            })
            $('ul>li').click(function(){
                console.log('123');
                var index=$(this).index();
                $('table').eq(index).show().siblings('table').hide();
            })
        });
</script>
<script>
        var check_user=function(ele, err){
            var uPattern = /^[a-zA-Z0-9_@-]{6,16}$/;
            //输出 true
            // console.log(uPattern.test(oUname.value));
            
            if(!uPattern.test(ele.value)){
                err.innerHTML="用户名须为6-16位字母数字-_组成";
                return false; 
            } else{
                err.innerHTML="";
            }
            return true;
        }
        var check_pwd=function(ele, err){
            //密码强度正则，6-18位，包括至少1个字母，1个数字，1个特殊字符
            //var is_password= /^.*(?=.{5,16})(?=.*\d)(?=.*[A-Za-z!@#$%^&*?]).*$/;
            // var is_password= /^[a-zA-Z0-9!@#$%^_&*]{6,18}$/;

            // 密码强度正则，6-16位，可以是字母、数字、特殊字符，不允许有空格
            var is_password=/^(?=.*[a-zA-Z\d])[!-~]{6,16}$/;
            //输出 true
            // console.log(oPass.value,is_password.test(oPass.value));
            if(!is_password.test(ele.value)){
                err.innerHTML="密码应为6-16位字母或数字或特殊符号组成";
                return false; 
            }else{
                err.innerHTML="";
            }
            return true;
        }

        var oNlogin=document.getElementById("login");
        var oUname=document.getElementById("user");
        var oErr_box=document.getElementById("error_box");
        var oPass=document.getElementById("pwd");
        
        var oUname1=document.getElementById("user1");
        var oPass1=document.getElementById("pwd1");
        var oPass2=document.getElementById("pwd2");
        var oRegist=document.getElementById("regist");
        var oRerr=document.getElementById("reg_err");        

        //  第一次写  ========================================================================

        // oUname.onblur=function(){
        //     oErr_box.innerHTML='';
        //     if(oUname.value.length>20||oUname.value.length<6){
        //         oErr_box.innerHTML="用户名请输入6-20位字符"
        //         return;
        //     }
        //     if(oUname.value.charCodeAt(0)>=48&&oUname.value.charCodeAt(0)<=57){
        //         oErr_box.innerHTML="首字符必须为字母";
        //         return;
        //     }
        //     for(var i=0;i<oUname.value.length;i++){
        //         var cc=oUname.value.charCodeAt(i);
        //         console.log(cc);
        //         // if((cc<48||cc>57)&&(cc<65||(cc>90&&cc<97)||cc>122)){
        //         //     oErr_box.innerHTML="用户名必须为字母或数字组成";
        //         //     return; 
        //         // }
        //         if(!(is_num(cc)||is_abc(cc))){
        //             oErr_box.innerHTML="用户名必须为字母或数字组成";
        //             return; 
        //         }
        //     }
        // }   
        //      function is_num(cc){
        //          if(cc>=48&&cc<=57){
        //              return true;
        //          }
        //          return false;
        //      }
        //      function is_abc(cc){
        //          if(cc>=65&&cc<=90){
        //              return true;
        //          }
            
        //          if(cc>=97&&cc<=122){
        //              return true;
        //          }

        //          return false;
        //      }


        // 正则表达式 登录页面
        oUname.onblur=function(){
            check_user(oUname, oErr_box)
        }
        oPass.onblur=function(){
            check_pwd(oPass, oErr_box);
        }

        // basic64
        function make_base_auth(user, password) {
            var tok = user + ':' + password;
            var hash = btoa(tok);
            return"Basic " + hash; 
        }

        $('#login').click(function(){
            if (check_user(oUname, oErr_box)) {
                check_pwd(oPass, oErr_box);
            }
            $.ajax({
                type:'get',
                url:"http://dzlua.top:5000/api/token",
                contentType:'application/json;charset=utf-8',
                dataType:'json',
                headers:{
                    "Authorization":make_base_auth($('#user').val(),$('#pwd').val())
                },
                success:function(data){
                    if(data&&data.token){
                        sessionStorage.setItem('token', data.token);
                    }
                    window.location.href="./index.html"
                },
                error:function(result){
                    alert('账号或密码错误，请重新输入');
                }

            })
        });


            // <!-- 注册页面 -->
            // 用户名
            oUname1.onblur=function(){
                check_user(oUname1,oRerr);
                console.log('1')
            }
            oPass1.onblur=function(){
                check_pwd(oPass1,oRerr)
            }

        oPass2.onblur=function(){
            console.log(oPass2.value);
            if(oPass2.value==oPass1.value){
               
            }else{
                oRerr.innerHTML="两次密码输入不一致请重新输入";
            }
            return;
        }
        function getRootPath(){
           
        }
        $('#regist').click(function(){
            if (!check_user(oUname1, oRerr) || !check_pwd(oPass1, oRerr)) {
                return;
            }
            $.ajax({
                type: "POST",
                url: "http://dzlua.top:5000/api/new_user",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                data: JSON.stringify({
                    username: $('#user1').val(),
                    password: $('#pwd1').val(),
                    }),
                success:function(data){
                    alert(data);
                }
            })

        })

        
</script>
</html>